<meta charset="utf-8">
<!-- <script src="main.js"></script> -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
  


</style>
<body>
    <div id="app">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">添加品牌(enter键盘事件)</h3>
        </div>
        <div class="panel-body form-inline">
          <label for="">
            ID: <input type="text" class="form-control" v-model="id">
          </label>
          <label for="">
            Name: <input type="text" class="form-control" v-model="name" @keyup.f2="add">
          </label>
          
          <input type="button" value="添加" class="btn btn-primary" @click="add">
         
          <input type="text" v-model="keyword"  class="form-control">
        </div>
      </div>
  

      <table class="table table-bordered table-hover table-striped">
        <thead>
          <th>ID</th>
          <th>Name</th>
          <th>Ctime</th>
          <th>Operation</th>
        </thead>
        <tr v-for="item in search(keyword)" :key="item.id">
          <td>{{item.id}}</td>
          <td v-text="item.name"></td>
          <td>{{item.ctime | dateFormat }}</td>
          <td><a href="" @click.prevent="del(item.id)">删除</a></td>
        </tr>
      </table>
      

    </div>
    </body>


    <script>
      //全局过滤器
      Vue.filter('dateFormat', function(dateStr) {
        var dt = new Date(dateStr)
        var y = dt.getFullYear()
        var m = dt.getMonth()+1
        var d = dt.getDate()
        return `${y}-${m}-${d}`
      })

      Vue.config.keyCodes.f2 = 113

        var vm = new Vue({
          el: '#app',
          data: {
            id: 0,
            name: '',
            list: [
              {id: 1, name: 'NIKKY HOME Retro ', ctime: new Date()},
              {id: 2, name: 'Retro Bathtub Wall ', ctime: new Date()},
              {id: 3, name: 'NIKKY HOME Pewter ', ctime: new Date()},
            ],
            keyword: '',

          },
          methods: {
            add() {
              var pro = {id:this.id, name:this.name, ctime: new Date()}
              this.list.push(pro)
            },
            del(id) {
              /* this.list.some((item,i)=> {
                if (item.id == id) {
                  this.list.splice(i, 1)
                  return true
                }
              }) */
              //findIndex some forEach  filter  数组的方法
              var index = this.list.findIndex(item => {
                if (item.id == id) {
                  return true
                }
              })
              this.list.splice(index, 1)
            },
            search(keyword) {
              // newList = []
              // this.list.forEach(item => {
              //   if (item.name.indexOf(keyword) != -1) {
              //     newList.push(item)
              //   }
              // })
              // return newList
              return this.list.filter(item => {
                if (item.name.includes(keyword)) {
                  return true
                }
              })

            }

          },
         //私有过滤器
         filters: {
           dateFormat: function(dateStr) {
            var dt = new Date(dateStr)
            var y = dt.getFullYear()
            var m = (dt.getMonth()+1).toString().padStart(2, '0')
            var d = dt.getDate()
            return `${y}-${m}-${d}`
           }
          },


        });
    </script>